import { StyledAddress, StyledModal } from './style'
import { Button, CheckBoxGroup, Form, FormItem, Input, Tag } from '@kedacom/react-next'
import { forwardRef, useEffect } from 'react'
import useIndexHook from './indexServer'
/**ip mac 组件 */
const UpdateAddressView = (props: {
	/**传递给组件的数据 */
	receiveAddress: { ip: string; mac: string; moid?: string }[]
	/**更改后传递数据的函数 */
	selectAddress: Function
	/**是否可以本地删除最后一条*/
	isDeleteFinallyData?: boolean
}) => {
	const useHook = useIndexHook(props.receiveAddress, props.selectAddress)
	return (
		<StyledAddress className="address-wrap">
			<div className="address-function">
				<span className="address-text">绑定客户端地址</span>
				<Button
					className="address-button"
					onClick={() => {
						useHook.localAddAddress()
					}}
				>
					从本地添加
				</Button>
				<Button
					className="address-button"
					onClick={() => {
						useHook.manualAddAddress()
					}}
				>
					手动添加
				</Button>
			</div>
			<Form className="form">
				<FormItem
					label="本地地址"
					className={useHook.addressLocalList && useHook.addressLocalList.length !== 0 ? 'bind-address' : ''}
				></FormItem>
				{useHook.addressLocalList && useHook.addressLocalList.length !== 0 ? (
					<>
						{useHook.addressLocalList.map((item, index) => {
							return (
								<FormItem className="bind-text" key={'bind' + index}>
									<FormItem className="address-form-text address-form-text-ip" label="IP地址：">
										<span className="address-form-span" title={item.ip}>
											{item.ip}
										</span>
									</FormItem>
									<FormItem className="address-form-text address-form-text-mac" label="MAC地址：">
										<span className="address-form-span" title={item.mac}>
											{item.mac}
										</span>
									</FormItem>
									{props.isDeleteFinallyData ? (
										<Tag
											onClick={() => {
												useHook.delLocalClick(item)
											}}
											type="failed"
										>
											删除
										</Tag>
									) : useHook.addressLocalList.length !== 1 ? (
										<Tag
											onClick={() => {
												useHook.delLocalClick(item)
											}}
											type="failed"
										>
											删除
										</Tag>
									) : null}
								</FormItem>
							)
						})}
					</>
				) : null}
				<FormItem
					label="其他地址"
					className={useHook.otherAddress && useHook.otherAddress.length !== 0 ? 'bind-other-address' : ''}
				></FormItem>
				{useHook.otherAddress && useHook.otherAddress.length !== 0 ? (
					<div>
						{useHook.otherAddress.map((item, index) => {
							return (
								<FormItem key={'add' + index} className="bind-other-text">
									<FormItem className="address-form-text address-form-text-ip" label="IP地址：">
										<span className="address-form-span" title={item.ip}>
											{item.ip}
										</span>
									</FormItem>
									<FormItem className="address-form-text address-form-text-mac" label="MAC地址：">
										<span className="address-form-span" title={item.mac}>
											{item.mac}
										</span>
									</FormItem>
									<Tag
										onClick={() => {
											useHook.delOtherClick(item)
										}}
										type="failed"
									>
										删除
									</Tag>
								</FormItem>
							)
						})}
					</div>
				) : (
					<></>
				)}{' '}
			</Form>
			<StyledModal
				open={useHook.showLocalModal}
				title="从本地添加"
				width={520}
				height={400}
				onCancel={() => useHook.onCancelLocalModal()}
				onOk={() => useHook.addAddressClick()}
			>
				<div className="address-check-box-text">请选择以下本地地址，添加客户端地址</div>
				<CheckBoxGroup
					className="address-check-box"
					options={useHook.groupOption}
					value={useHook.groupValue}
					onChange={(e, v, o, l) => {
						useHook.checkBoxGroupChange(v)
					}}
				/>
			</StyledModal>
			<StyledModal
				open={useHook.showManualModal}
				title="手动添加"
				width={500}
				height={400}
				okText="添加"
				onCancel={() => useHook.onCancelManualModal()}
				onOk={() => useHook.addManualAddressClick()}
			>
				<Form className="modal-form">
					<FormItem className="address-form-text" label="IP地址">
						<Input
							width={200}
							value={useHook.manualForm.ip}
							onChange={(e, v) => useHook.onManualFormCheck(v, 'ip')}
							placeholder="请输入IP地址"
							maxLength={128}
						/>
					</FormItem>
					<FormItem className="address-form-text" label="MAC地址">
						<Input
							width={200}
							value={useHook.manualForm.mac}
							onChange={(e, v) => useHook.onManualFormCheck(v, 'mac')}
							placeholder="请输入MAC地址"
							maxLength={128}
						/>
					</FormItem>
				</Form>
			</StyledModal>
		</StyledAddress>
	)
}

export default UpdateAddressView
